<template>
  <div class="home">
    <!-- {{count}}
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{item}}</li>
    </ul>
    <button @click="countAdd">add</button>
    <button @click="arrAdd">添加数组项</button> -->
  </div>
</template>

<script>
// import { ref, reactive } from 'vue'
import { countAdd, arrAdd, arr, count } from '@/setups'
import { getBanners } from '@/api/home'
export default {
  name: 'Home',
  setup() {
    // console.log(this);
    // ref用来声明一个基本数据类型的数据 这样的数据可以和页面实现数据双向绑定
    // vue3的数据劫持方法使用的时proxy 其实就是object.difineProperty的升级版
    // let count = ref([1, 2, 3])
    // let arr = reactive([1, 2, 3])
    // let count = ref(0)
    return {
      countAdd,
      arrAdd,
      arr,
      count
    }
  },

  created() {
    // console.log(this);
    // this.$loading.show('你是个麻瓜')
    // setTimeout(() => {
    //   this.$loading.hide()
    // }, 2000)
    getBanners()
  }
}
</script>
<style lang="scss">
  h2 {
  font-size: 30px;}
</style>
